// ===================================================
// 🧱 init.scss - 全局样式重置与初始化
// 用途：重置 margin/padding，统一字体、颜色、盒模型等
// 引入方式：@import "@/assets/styles/init.scss";
// ===================================================

// 1. 盒模型 + 全局盒模型继承
*,
*::before,
*::after {
  box-sizing: border-box;
}

// 2. 清除默认 margin 和 padding
* {
  margin: 0;
  padding: 0;
  border: 0;
}

// 3. HTML5 元素语义化重置
//article,
//aside,
//details,
//figcaption,
//figure,
//footer,
//header,
//hgroup,
//menu,
//nav,
//section {
//  display: block;
//}

// 4. 列表去掉默认样式
ol,
ul {
  list-style: none;
}

// 5. 表格边框合并
table {
  border-collapse: collapse;
  border-spacing: 0;
}

// 6. 图片自适应 + 去除边框
img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

// 7. 表单元素基础样式
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

// 按钮默认指针
button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
  cursor: pointer;
  background: transparent;
}

// 输入框聚焦高亮（可选）
input:focus,
textarea:focus {
  outline: 2px solid #409eff;
  outline-offset: -1px;
}

 //8. 全局字体设置
html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
  font-size: 14px; // 基准字体
  line-height: 1.5;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 9. body 基础样式
body {
  width: 100%;
  height: 100%;
  text-rendering: optimizeLegibility;
  scrollbar-width: none;
}

// 10. 隐藏滚动条（可选）
.hide-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none; // IE 10+
  scrollbar-width: none; // Firefox
}

// 11. Flex 布局常用工具类（可选）
.flex {
  display: flex;

  &-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-row {
    display: flex;
    flex-direction: row;
  }

  &-col {
    display: flex;
    flex-direction: column;
  }

  &-between {
    display: flex;
    justify-content: space-between;
  }

  &-around {
    display: flex;
    justify-content: space-around;
  }

  &-wrap {
    flex-wrap: wrap;
  }
}

// 12. 文字省略（单行/多行）
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 13. 清除浮动
.clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 14. 点击穿透（移动端）
.touch-call {
  -webkit-tap-highlight-color: transparent;
}

// 15. 禁用选中（适合按钮、标签）
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// 16. 透明度（兼容性写法）
.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-90 {
  opacity: 0.9;
}

// 17. 隐藏元素（视觉隐藏但保留可访问性）
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}